<template>
  <div class="excel_content">
    <div class="excel_name">
      <div></div>
      <div class="high_frequency" @click="highFun">
        <img src="@/assets/image/questionlist.png" alt="" />
        <span>高频问题识别报告</span>
      </div>
    </div>
    <el-collapse v-model="activeNames">
      <el-collapse-item name="1">
        <template #title>
          <div class="excel_name_content">
            <img src="@/assets/image/Excel.png" alt="" />
            <span>{{ fileInfo.fileName }}</span>
          </div>
        </template>
        <div class="file_name_list">
          <div class="file_name_item" v-for="(item, index) in fileInfo.headers" :key="index">
            {{ item }}
          </div>
        </div>
      </el-collapse-item>
    </el-collapse>
    <div class="total_rule_content">
      <div class="overall_rule">
        <span>总体规则</span>
        <div class="overall_rule_content">
          <div>
            <div class="overall_rule_item">
              <div class="overall_title">去除重复来电</div>
              <el-switch v-model="allRuleSwitch.removeDup" size="large" />
            </div>
            <div class="overall_rule_item">
              <div class="overall_title">去除已解决且满意项</div>
              <el-switch v-model="allRuleSwitch.filterSatisfy" size="large" />
            </div>
          </div>

          <el-button
            type="primary"
            :disabled="!allRuleSwitch.removeDup && !allRuleSwitch.filterSatisfy"
            @click="runTotalFun"
            :loading="loadingBtns.totalRuleFlag"
          >
            <template #loading>
              <div class="custom-loading">
                <svg class="circular" viewBox="-10, -10, 50, 50">
                  <path
                    class="path"
                    d="
            M 30 15
            L 28 17
            M 25.61 25.61
            A 15 15, 0, 0, 1, 15 30
            A 15 15, 0, 1, 1, 27.99 7.5
            L 15 15
          "
                    style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"
                  />
                </svg>
              </div>
            </template>
            运行总体规则</el-button
          >
        </div>
      </div>
      <el-button type="primary" @click="addRule" @keyup.prevent @keydown.enter.prevent
        >新增规则</el-button
      >
      <el-button type="primary" @click="addCollectRule" @keyup.prevent @keydown.enter.prevent
        >新增收藏规则</el-button
      >
      <div class="rule_list" v-for="(value, key) in ruleList" :key="key">
        <div class="rule_item_title">
          <div class="title_content">{{ value.station }}/{{ value.title }}</div>
          <div class="collect" @click="collectRule(value, key)">
            <img src="@/assets/image/Subtract.png" alt="" />
            <span>收藏规则</span>
          </div>
        </div>
        <div class="rule_content">
          <div class="rule_mask">
            <template v-for="(item, index) in value.ruleContent" :key="index">
              <!-- 且或项 -->
              <div class="logic_select" v-if="item.state === 'logic'">
                <el-select
                  v-model="item.content"
                  placeholder=""
                  @change="
                    (val) => {
                      logicChange(key, index, val)
                    }
                  "
                >
                  <el-option
                    v-for="itemf in logicDic"
                    :key="itemf.value"
                    :label="itemf.label"
                    :value="itemf.value"
                  />
                </el-select>
              </div>
              <!-- 字段逻辑 -->
              <div class="rule_fields" v-if="item.state === 'fields'">
                <div class="fields_content">
                  <div class="fields_title">字段内容</div>
                  <el-select v-model="item.content" class="m-2" placeholder="请选择">
                    <el-option
                      v-for="itemf in fileInfo.headers"
                      :key="itemf"
                      :label="itemf"
                      :value="itemf"
                    />
                  </el-select>
                </div>
              </div>
              <!-- 语义逻辑 -->
              <div class="rule_semantic" v-if="item.state === 'condition'">
                <div class="semantic_content">
                  <div class="semantic_title">语义逻辑</div>
                  <el-select v-model="item.content" class="m-2" placeholder="请选择">
                    <el-option
                      v-for="itemf in semanticDic"
                      :key="itemf.value"
                      :label="itemf.label"
                      :value="itemf.value"
                    />
                  </el-select>
                </div>
              </div>
              <!-- 语义内容 -->
              <div class="rule_filtercontent" v-if="item.state === 'filtercontent'">
                <div class="filtercontent_content">
                  <div class="filtercontent_title">语义内容</div>
                  <el-input
                    placeholder="请输入"
                    v-model="item.content"
                    :disabled="handledisabled(index, value.ruleContent)"
                  ></el-input>
                  <img src="@/assets/image/remove.png" @click="remove(key, index)" />
                </div>
              </div>
            </template>
          </div>

          <div class="rule_button">
            <el-button
              class="add_semantic_btn"
              @click="addoperation(key)"
              @keyup.prevent
              @keydown.enter.prevent
              >＋ 添加操作</el-button
            >
            <!-- <el-button
              class="add_fields_btn"
              @click="addlogic(key)"
              @keyup.prevent
              @keydown.enter.prevent
              >＋ 添加逻辑</el-button
            > -->
          </div>
        </div>
        <div @click="removeRule(key)" class="remove_rule">✕</div>
      </div>
    </div>
    <div style="height: 49px"></div>
    <div class="bottom_btn">
      <el-button
        type="primary"
        @click="runAllFun"
        :loading="loadingBtns.allRuleFlag"
        @keyup.prevent
        @keydown.enter.prevent
      >
        <template #loading>
          <div class="custom-loading">
            <svg class="circular" viewBox="-10, -10, 50, 50">
              <path
                class="path"
                d="
            M 30 15
            L 28 17
            M 25.61 25.61
            A 15 15, 0, 0, 1, 15 30
            A 15 15, 0, 1, 1, 27.99 7.5
            L 15 15
          "
                style="stroke-: 4px; fill: rgba(0, 0, 0, 0)"
              />
            </svg>
          </div>
        </template>
        运行全部规则</el-button
      >
    </div>
    <ReportPop v-if="dialogVisible" v-model:visible="dialogVisible" :fileInfo="fileInfo" />
    <!-- 收藏规则 -->
    <RulePop
      v-if="ruleVisible"
      v-model:visible="ruleVisible"
      @changeRule="changeRule"
      :ruleObj="ruleObj"
    />
    <CollectPop v-if="collectVisible" v-model:visible="collectVisible" @changeData="changeData" />
  </div>
</template>
<script setup lang="ts">
import { ElMessage, useDisabled } from 'element-plus'
import { saveAs } from 'file-saver'
import { getFileDetails, ruleFilterAPI } from '@/api/originalfile.js'
import ReportPop from './components/ReportPop.vue'
import RulePop from './components/RulePop.vue'
import CollectPop from './components/CollectPop.vue'
import { ElMessageBox } from 'element-plus'
import { useAuthStore } from '@/stores/auth.js'
import { useRoute, useRouter } from 'vue-router'
import { reactive, ref, toRaw } from 'vue'
import { logicDic, semanticDic } from '@/utils/dict.js'
import { dealFileName } from '@/utils/index.js'

import _ from 'lodash'
const route = useRoute()
const ruleList = ref<any>({})
const authStore = useAuthStore()
const dialogVisible = ref(false)
const ruleVisible = ref(false)
const collectVisible = ref(false)

//总体规则switch项
const allRuleSwitch = reactive({
  removeDup: false,
  filterSatisfy: false,
})
//文件信息
const fileInfo = ref<any>({
  headers: [],
  fileName: '',
})
const activeNames = ref(['1'])

//单个规则
const ruleObj = ref({})
const ruleKey = ref('')
const loadingBtns = reactive<any>({})
const addRule = () => {
  if (loadingBtns.allRuleFlag) return ElMessage.warning('正在运行全部规则，请稍稍后。')
  console.log('rule' + (Object.keys(ruleList.value).length + 1), 'ruleList.valueruleList.value')
  if (Object.keys(ruleList.value).length) {
    let keys = Object.keys(ruleList.value)
    // 获取最后一个键
    let lastKey = keys[keys.length - 1]
    let key = Number(lastKey.slice(-1)) + 1
    console.log(key, 'keykeykeykey')
    ruleList.value['rule' + key] = {
      title: '规则' + key,
      station: authStore.userInfo.station,
      ruleContent: [],
    }
  } else {
    ruleList.value['rule1'] = {
      title: '规则' + (Object.keys(ruleList.value).length + 1),
      station: authStore.userInfo.station,
      ruleContent: [],
    }
  }
}
const handledisabled = (index, list) => {
  let flag = false
  if (list[index - 1].content === '6' || list[index - 1].content === '7') {
    flag = true
    list[index].content = ''
  } else {
    flag = false
  }
  return flag
}
//收藏完规则后刷新结构
const changeRule = (data) => {
  ruleList.value[ruleKey.value].title = data.title
  ruleList.value[ruleKey.value].station = data.station
  console.log(data, 'data.stationdata.station')
  ruleList.value[ruleKey.value].ruleContent.forEach((item) => {
    item.station = data.station
  })
}
//收藏规则
const collectRule = (data, key) => {
  console.log(key)
  if (loadingBtns.allRuleFlag) return ElMessage.warning('正在运行全部规则，请稍稍后。')
  if (data.ruleContent.length === 0) return ElMessage.warning('请添加规则内容')
  let falg = false
  let skipFilterContent = false // 标记是否需要跳过 filtercontent 的校验
  ruleKey.value = key
  for (let item of data.ruleContent) {
    if (item.state === 'condition' && (item.content === '7' || item.content === '6')) {
      skipFilterContent = true // 当 condition 为 7 或 6 时，设置标记为 true
    }
    if (item.state === 'filtercontent' && skipFilterContent) {
      continue // 跳过 filtercontent 的校验
    }
    if (!item.content) {
      falg = true
    }
  }

  if (falg) return ElMessage.warning('请将规则补充完整')
  ruleObj.value = {
    ...data,
    file: [{ fileUrl: fileInfo.value.fileUrl, fileName: fileInfo.value.fileName }],
  }
  ruleVisible.value = true
}
//新增收藏规则
const addCollectRule = () => {
  if (loadingBtns.allRuleFlag) return ElMessage.warning('正在运行全部规则，请稍稍后。')
  collectVisible.value = true
}
const changeData = (list) => {
  console.log(list, 'datassss')
  let keys = Object.keys(ruleList.value)
  // 获取最后一个键
  let lastKey = keys[keys.length - 1]
  let key = Number(lastKey.slice(-1))
  list.forEach((item, index) => {
    ruleList.value['rule' + (key + index + 1)] = item
  })
}
onMounted(() => {
  getFileDetails(route.query.fileId).then((res) => {
    if (res.code === 200) {
      fileInfo.value = res.data
    }
  })
})
const removeRule = (key) => {
  if (loadingBtns.allRuleFlag) return ElMessage.warning('正在运行全部规则，请稍稍后。')
  ElMessageBox.confirm('是否确认删除？', '系统提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    delete ruleList.value[key]

    // function dealObj(obj) {
    //   let newObj = {}
    //   let counter = 1

    //   // 遍历原始对象的键值对
    //   for (let key in obj) {
    //     if (obj.hasOwnProperty(key)) {
    //       // 使用新的键名
    //       newObj[`rule${counter}`] = obj[key]
    //       counter++
    //     }
    //   }
    //   return newObj
    // }
    // let deepData = _.cloneDeep(toRaw(ruleList.value))
    // ruleList.value = dealObj(deepData)

    // console.log(deepData, 'deepData')

    // Object.keys(deepData).forEach((item, index, val) => {
    //   console.log(item, index, 'item, index,item, index,')
    //   ruleList.value['rule' + (index + 1)] = deepData[item]
    // })
  })
}
const logicChange = (key, index, val) => {
  let content = ruleList.value[key].ruleContent.find((item) => {
    return item.state === 'logic'
  })?.content
  if (content) {
    ruleList.value[key].ruleContent[index].content = content
  }
}
//高频问题识别报告
const highFun = () => {
  if (loadingBtns.allRuleFlag) return ElMessage.warning('正在运行全部规则，请稍稍后。')
  if (loadingBtns.totalRuleFlag) return ElMessage.warning('正在运行总体规则，请稍稍后。')
  dialogVisible.value = true
}
//验证规则
function validateObj(obj) {
  function isObjectByPrototype(value) {
    return (
      typeof value === 'object' &&
      value !== null &&
      Object.getPrototypeOf(value) === Object.prototype
    )
  }
  if (!isObjectByPrototype(obj) || Object.keys(obj).length === 0) {
    console.error(`请添加规则`)
    return `请添加规则`
  }

  for (let key in obj) {
    if (key.startsWith('rule')) {
      let ruleArray = obj[key].ruleContent
      if (!ruleArray || ruleArray.length === 0) {
        console.error(`请添加${obj[key].title}的规则`)
        return `请添加${obj[key].title}的规则`
      }
      let skipFilterContent = false // 标记是否需要跳过 filtercontent 的校验
      for (let item of ruleArray) {
        if (item.state === 'condition' && (item.content === '7' || item.content === '6')) {
          skipFilterContent = true // 当 condition 为 7 或 6 时，设置标记为 true
        }
        if (item.state === 'filtercontent' && skipFilterContent) {
          continue // 跳过 filtercontent 的校验
        }
        if (!item.content) {
          console.error(`${obj[key].title} 中有规则为空的项`)
          return `${obj[key].title} 中有规则为空的项`
        }
      }
      skipFilterContent = false // 重置标记
    }
  }
  return true
}
//运行全部规则
const runAllFun = () => {
  if (loadingBtns.totalRuleFlag) return ElMessage.warning('正在运行总体规则，请稍稍后。')
  const submitData = _.cloneDeep(toRaw(ruleList.value))
  // 调用 validateObj 并处理返回值
  const validationResult = validateObj(submitData)
  if (typeof validationResult === 'string') return ElMessage.warning(validationResult) // 仅在返回字符串时调用警告
  submitData.file = [
    {
      fileUrl: fileInfo.value.fileUrl,
      fileName: fileInfo.value.fileName,
      title: dealFileName(fileInfo.value.fileName, '全部规则'),
      userId: authStore.userInfo.id + '',
    },
  ]
  ElMessageBox({
    title: '系统提示',
    message: '请选择需要生成的表单。',
    showCancelButton: true,
    confirmButtonText: '坐标点位表',
    cancelButtonText: '筛查结果',
    showClose: false,
    closeOnClickModal: false,
    closeOnPressEscape: false,
  })
    .then((action) => {
      console.log('确认确认确认', submitData.file[0].title)
      submitData.sum = [
        {
          removeDup: allRuleSwitch.removeDup + '',
          locInfer: 'true',
          specOnly: 'true',
          filterSatisfy: allRuleSwitch.filterSatisfy + '',
        },
      ]
      loadingBtns.allRuleFlag = true
      ruleFilterAPI(submitData).then((res) => {
        loadingBtns.allRuleFlag = false
        saveAs(res, submitData.file[0].title)
      })
    })
    .catch(() => {
      console.log('取消取消取消')
      submitData.sum = [
        {
          removeDup: allRuleSwitch.removeDup + '',
          locInfer: 'false',
          specOnly: 'false',
          filterSatisfy: allRuleSwitch.filterSatisfy + '',
        },
      ]
      loadingBtns.allRuleFlag = true
      ruleFilterAPI(submitData).then((res) => {
        loadingBtns.allRuleFlag = false
        saveAs(res, submitData.file[0].title)
      })
    })

  // ElMessageBox.confirm('请选择需要生成的表单。', '系统提示', {
  //   confirmButtonText: '坐标点位表',
  //   cancelButtonText: '筛查结果',
  //   type: 'warning',
  // })
  //   .then(() => {
  //     console.log('确认确认确认', submitData.file[0].title)
  //     submitData.sumRule = [
  //       {
  //         removeDup: 'false',
  //         locInfer: 'false',
  //         specOnly: 'true',
  //       },
  //     ]
  //     loadingBtns.allRuleFlag = true
  //     ruleFilterAPI(submitData).then((res) => {
  //       loadingBtns.allRuleFlag = false
  //       saveAs(res, submitData.file[0].title)
  //     })
  //   })
  //   .catch(() => {
  //     console.log('取消取消取消')
  //     submitData.sumRule = [
  //       {
  //         removeDup: allRuleSwitch.removeDup + '',
  //         locInfer: 'false',
  //         specOnly: 'false',
  //       },
  //     ]
  //     loadingBtns.allRuleFlag = true
  //     ruleFilterAPI(submitData).then((res) => {
  //       loadingBtns.allRuleFlag = false
  //       saveAs(res, submitData.file[0].title)
  //     })
  //   })
}
//运行总体规则
const runTotalFun = () => {
  if (loadingBtns.allRuleFlag) return ElMessage.warning('正在运行全部规则，请稍稍后。')
  let submitData: any = {}
  submitData.sum = [
    {
      removeDup: allRuleSwitch.removeDup + '',
      locInfer: 'false',
      specOnly: 'false',
      filterSatisfy: allRuleSwitch.filterSatisfy + '',
    },
  ]
  submitData.file = [
    {
      fileUrl: fileInfo.value.fileUrl,
      fileName: fileInfo.value.fileName,
      title: dealFileName(fileInfo.value.fileName, '总体规则'),
      userId: authStore.userInfo.id + '',
    },
  ]
  loadingBtns.totalRuleFlag = true

  ruleFilterAPI(submitData)
    .then((res) => {
      loadingBtns.totalRuleFlag = false
      saveAs(res, submitData.file[0].title)
    })
    .catch((err) => {
      loadingBtns.totalRuleFlag = false
    })
}
//添加操作的逻辑
const addoperation = (key) => {
  if (loadingBtns.allRuleFlag) return ElMessage.warning('正在运行全部规则，请稍稍后。')
  if (loadingBtns.totalRuleFlag) return ElMessage.warning('正在运行总体规则，请稍稍后。')
  let list = toRaw(ruleList.value[key].ruleContent)

  if (list.length >= 2) {
    ruleList.value[key].ruleContent.push(
      {
        state: 'logic',
        content: '',
        ruleId: key.slice(-1),
        station: authStore.userInfo.station,
      },
      //字段逻辑
      {
        state: 'fields',
        content: '',
        ruleId: key.slice(-1),
        station: authStore.userInfo.station,
      },
      //语义逻辑
      {
        state: 'condition',
        content: '',
        ruleId: key.slice(-1),
        station: authStore.userInfo.station,
      },

      //语义内容
      {
        state: 'filtercontent',
        content: '',
        ruleId: key.slice(-1),
        station: authStore.userInfo.station,
      },
    )
  }
  if (list.length === 0) {
    ruleList.value[key].ruleContent.push(
      //字段逻辑
      {
        state: 'fields',
        content: '',
        ruleId: key.slice(-1),
        station: authStore.userInfo.station,
      },
      //语义逻辑
      {
        state: 'condition',
        content: '',
        ruleId: key.slice(-1),
        station: authStore.userInfo.station,
      },

      //语义内容
      {
        state: 'filtercontent',
        content: '',
        ruleId: key.slice(-1),
        station: authStore.userInfo.station,
      },
    )
  }
}
const remove = (key, index) => {
  if (loadingBtns.allRuleFlag) return ElMessage.warning('正在运行全部规则，请稍稍后。')
  if (loadingBtns.totalRuleFlag) return ElMessage.warning('正在运行总体规则，请稍稍后。')
  ElMessageBox.confirm('是否确认删除？', '系统提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    if (index === ruleList.value[key].ruleContent.length - 1) {
      ruleList.value[key].ruleContent.splice(index, 1)
      ruleList.value[key].ruleContent.splice(index - 1, 1)
      ruleList.value[key].ruleContent.splice(index - 2, 1)
      ruleList.value[key].ruleContent.splice(index - 3, 1)
    } else {
      ruleList.value[key].ruleContent.splice(index + 1, 1)
      ruleList.value[key].ruleContent.splice(index, 1)
      ruleList.value[key].ruleContent.splice(index - 1, 1)
      ruleList.value[key].ruleContent.splice(index - 2, 1)
    }
  })
}
defineOptions({
  name: 'V-home',
})
</script>
<style scoped lang="scss">
.excel_content {
  width: 100%;
  overflow-y: auto;
  height: 100%;
  .excel_name_content {
    img {
      width: 33px;
      height: 33px;
      vertical-align: middle;
      margin: 0 13px;
    }
  }
  .custom-loading {
    .circular {
      margin-right: 6px;
      width: 18px;
      height: 18px;
      animation: loading-rotate 2s linear infinite;
      .path {
        animation: loading-dash 1.5s ease-in-out infinite;
        stroke-dasharray: 90, 150;
        stroke-dashoffset: 0;
        stroke-width: 2;
        stroke: var(--el-button-text-color);
        stroke-linecap: round;
      }
    }
  }
  // padding: 10px;
  .excel_name {
    background-color: #fff;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .high_frequency {
      background-color: rgba(237, 241, 255, 1);
      color: rgba(67, 111, 246, 1);
      padding: 10px 15px;
      border-radius: 20px;
      cursor: pointer;
      img {
        width: 20px;
        height: 20px;
        vertical-align: middle;
        margin-right: 10px;
      }
    }
  }
  :deep(.el-select__wrapper) {
    background: #f5f7fa;
  }
  :deep(.el-input__wrapper) {
    background: #f5f7fa;
  }
  .file_name_list {
    display: flex;
    width: 100%;
    gap: 10px;
    flex-wrap: wrap;
    background-color: rgba(245, 247, 250, 1);
    padding: 10px;
    .file_name_item {
      padding: 5px 10px;
      background-color: #fff;
      border: 1px solid rgba(229, 230, 235, 1);
      border-radius: 5px;
    }
  }
  .rule_mask {
    background-color: #fff;
    display: inline-block;
    padding: 15px 0 0 15px;
    border-radius: 10px;
  }
  .total_rule_content {
    padding: 15px;
    margin-top: 20px;
    background-color: rgba(245, 247, 250, 1);
    .overall_rule {
      display: flex;
      align-items: center;
      margin-bottom: 15px;
      span {
        flex: 1;
      }
      .overall_rule_content {
        flex: 27;
        background: #fff;
        padding: 6px 15px 6px 10px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .overall_rule_item {
          display: inline-block;
          align-items: center;
          padding: 1px 10px 1px 10px;
          border: 1px solid rgba(0, 0, 0, 0.1);
          border-radius: 12px;
          margin-right: 15px;
          .overall_title {
            display: inline-block;
            margin-right: 10px;
          }
        }
      }
    }

    .rule_list {
      background-color: #fff;
      padding: 20px;
      margin-top: 15px;
      position: relative;
      .rule_item_title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .title_content {
          font-weight: 600;
        }
        .collect {
          background-color: rgba(242, 243, 245, 1);
          padding: 6px 8px;
          border-radius: 6px;
          cursor: pointer;
          img {
            width: 18px;
            height: 18px;
            vertical-align: bottom;
          }
          span {
            font-size: 14px;
            margin-left: 5px;
          }
        }
      }
      .rule_content {
        margin-top: 15px;
        padding: 20px;
        border-radius: 15px;
        background: rgba(245, 247, 250, 1);
        .rule_button {
          display: inline-block;
          vertical-align: bottom;
          background: #fff;
          padding: 10px;
          margin-left: 16px;
          border-radius: 10px;
          button {
            color: #436ff6;
          }
        }

        .logic_select {
          width: 61px;
          margin-bottom: 15px;
          display: block;
        }
        .rule_semantic {
          display: inline-block;
          margin-right: 15px;
          .semantic_content {
            display: flex;
            align-items: center;
            padding: 4px 15px 4px 10px;
            width: 300px;
            margin-bottom: 15px;
            .semantic_title {
              width: 117px;
            }
            img {
              margin-left: 10px;
              width: 22px;
              height: 22px;
            }
          }
        }
        .rule_filtercontent {
          display: inline-block;
          margin-right: 15px;
          .filtercontent_content {
            display: flex;
            align-items: center;
            padding: 4px 15px 4px 10px;
            width: 329px;
            margin-bottom: 15px;
            .filtercontent_title {
              width: 117px;
            }
            img {
              margin-left: 10px;
              width: 22px;
              height: 22px;
            }
          }
        }
        .rule_fields {
          display: inline-block;
          margin-right: 15px;
          .fields_content {
            display: flex;
            align-items: center;
            padding: 4px 15px 4px 10px;
            width: 300px;
            margin-bottom: 15px;
            .fields_title {
              width: 117px;
            }
            img {
              margin-left: 10px;
              width: 22px;
              height: 22px;
            }
          }
        }
      }
      .remove_rule {
        position: absolute;
        right: 0;
        top: -4px;
        width: 20px;
        text-align: center;
        height: 20px;
        line-height: 20px;
        background: red;
        color: #fff;
        border-radius: 50%;
        cursor: pointer;
      }
    }
  }
  .bottom_btn {
    position: fixed;
    bottom: 0;
    // left: -100px;
    right: 0;
    width: 93%;
    height: 49px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    background-color: #fff;
    padding: 10px 20px;
    // button {
    //   float: right;
    // }
  }
}
</style>
